<template>
  <div class="body">
    <div class="searchHead">
      <div class="headSearch">
        病虫害名称:<el-input v-model="scientificName"
                  style="width: 200px;"
                  placeholder="请输入内容"
                  clearable />
      </div>
      <div class="headSearch">
        病虫害部位: <el-select v-model="diseasePlace"
                   placeholder="请选择"
                   clearable>
          <el-option v-for="item in diseasePlaceOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </div>
      <div class="headSearch">
        病虫害类型: <el-select v-model="type"
                   placeholder="请选择"
                   clearable>
          <el-option v-for="item in typeOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </div>
      <div class="headSearch">
        <el-button type="primary"
                   plain
                   @click="load">查询</el-button>
      </div>
    </div>
    <el-table :data="dataList"
              style="width: 100%">
      <el-table-column prop="scientificName"
                       label="名称"
                       width="180" />
      <el-table-column prop="picture"
                       label="图片"
                       width="200">
        <template #default="scope">
          <el-image :src="scope.row.picture" style="width:180px;height:120px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="commonName"
                       label="俗名"
                       width="180" />
      <el-table-column prop="diseasePlace"
                       label="病虫害部位"
                       width="180" />
      <el-table-column prop="type"
                       label="类型"
                       width="180" />
      <el-table-column prop="mainSymptom"
                       label="主要症状" />
      <el-table-column prop="briefIntro"
                       label="简介" />
    </el-table>
    <el-pagination class="pagination"
                   background
                   prev-text="上一页"
                   next-text="下一页"
                   layout="prev, pager, next,total"
                   :total="total"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   @current-change="pageChange" />
  </div>
</template>

<script>
import { getCharacteristicPage } from "@/api/pad/characteristic"
import { diseasePlaceList, typeList } from "@/config/dict/pad"
export default {
  data () {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      scientificName: '',
      diseasePlace: '',
      type: '',
      diseasePlaceOption: diseasePlaceList,
      typeOption: typeList
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getCharacteristicPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.type,
        diseasePlace: this.diseasePlace,
        scientificName: this.scientificName
      })
      this.dataList = data.data.records
      this.total = data.data.total
    },
    goitemDetail (id) {
      this.$router.push(`bigdata-itemDetail?id=${id}`)
    },
    pageChange (page) {
      this.pageNum = page
      this.load()
    },
    goPage (webUrl) {
      window.open(webUrl, "_blank")
    }
  }
}
</script>
<style lang="scss" scoped>
.body {
  padding: 10px 0;
  width: 87%;
  min-height: 700px;
}
.itemList {
  min-height: 700px;
  margin: 0 auto;
}
.item {
  width: 100%;
  border-bottom: 1px solid #999999;
  padding: 10px;
  height: 190px;
  cursor: pointer;

  .item-img {
    margin-right: 20px;
    width: 220px;
    height: 160px;
    object-fit: cover;
    float: left;
  }

  .center {
    float: left;
    width: 50%;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .title:hover {
    color: #00a651;
  }

  .summary {
    height: 112px;
    color: #999999;
    margin-right: 20px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }

  .time {
    color: #999999;
  }

  .source {
    float: right;
  }
}

.pagination {
  margin: 20px;
}

.searchHead {
  display: flex;
  margin: 10px 0;

  .headSearch {
    margin: 20px;
  }
}
</style>
